/** 
 * @description 多个图片展示或选择控件【仅支持从服务端选择图片】
 * */ 
Rsd.define('Rsd.form.Images', {
    extend: 'Rsd.control.List',
    requires:['Rsd.form.Image'],
    xtype: 'images',
    ctrlTagName: 'div',
    ctrlCls: 'x-control-images',
    dataIndex:'',
    clip:null,
   
    /**
    * @description 是否是只读模式
    * */
    readonly:false,
    /**
     * @description image/jpeg, image/x-png, image/gif
     * */
    accept:'*/*',
    /**
     * 
     */
    border:true,
    /**
     * 控件的背景图片，false 或者 none 表示不设置背景图片
     */
    backgroundImage:false,
    /**
     * @description value 值格式化字符串
     * */
    formatString:null,
    /**
     * 图片最多数量
     */
    maxLength:4,
    /**
     * 自定义选择事件
     *  */ 
    onselect:null,
    /**
     * 自定义删除事件
     */
    ondelete:null,
    /**
     * 选择的文件发生改变
     */
    onchange:null,
    /**
     * 默认大小:80 * 80
     */
    itemStyle:{height:80,width:80},
    /*
     * */
    constructor: function Images(config) {

        this.apply(config||{});
    },
    /**
     * 
     */
    onAfterInit:function onAfterInit()
    {
        this.callParent();
        this.setValue(this.value);//默认自动加载一次数据
    },
    /**
     * 
     * @param {Array} value 图片URL数组
     */
    setValue:function (value)
    {
        var me = this;
        var _value = value||this.value;
        var urls =[];
        var items = [];
        if(Rsd.isString(_value))
        {
            urls.push(_value);
        }
        if(Rsd.isArray(_value))
        {
            urls = _value;
        }
        for(var i in urls)
        {
            items.push(
                {
                    xtype:'image',
                    width:'100%',
                    height:'100%',
                    label:null,
                    src: Rsd.isObject(urls[i])?urls[i].src:urls[i],
                    readonly:me.readonly,
                    border:me.border,
                    parent:me,
                    //onselect:'onImageSelect',
                    onview:'viewAllImages'
                }
            );
        }

        if(!me.readonly && me.maxLength > 0)
        {

            for(var i =items.length;i< me.maxLength;i++) 
            {
                items.push(
                    {
                        xtype:'image',
                        width:'100%',
                        height:'100%',
                        label:null,
                        src: '#',
                        border:me.border,
                        readonly:me.readonly,
                        parent:me,
                        //onselect:'onImageSelect'
                    }
                );
            }
            
        } 

        this.loadData(items);

    },
    /**
     * 
     */
    addItem:function addItem(item)
    {
        var me = this;
        var _config = Rsd.apply( {
            xtype:'image',
            width:'100%',
            height:'100%',
            label:null,
            src: '#',
            border:me.border,
            readonly:me.readonly,
            parent:me,
            selectorServices:me.selectorServices||Rsd.app.imageSelectorServices
             
        },item);

        this.callParent(_config);
    },
    
    /**
     * 
     */
    viewAllImages:function viewAllImages(sender,evt)
    {
        var _value = sender.parent.getValue();
        var urls =[]; 
        if(Rsd.isString(_value))
        {
            urls.push(_value);
        }
        if(Rsd.isArray(_value))
        {
            urls = _value;
        }
        var imgs = [];
        for(var i in urls)
        {
            imgs.push({src:urls[i],text: ""});
        }
        var _view = Rsd.create('Rsd.widget.ImageViewer',{title:''});

        _view.showDialog(this.parent).loadData(imgs);
    },
    /*
    * */
    getValue:function getValue() {
        return this.value;
    },
    
    /*
    *
    * */
    makeControl:function makeControl(config,row)
    {
        //图片地址是一个数组
        var me = this;

        me.timer = (me.timer||10) + 0;
        if(me.timer > 3000)
        {
            me.timer=10;
        }
        var _config = config ||{};
        //var _editable = _config.editable;
        var _value = row[_config.dataIndex||_config.name];
        var _h = _config.height || 50;
        var _w = _config.width || 50;
        var _ctrl = document.createElement('img');

        setTimeout(function () {
            var _src = '';
            if(_value &&_value.startWith('http://'))
            {
                _src = _value;
            }else
            {
                _src = Rsd.formatTemplateString(_config.formatString,row);
            }

            var list = _src.split('http://');
            if(list.length > 2)
            {
                _ctrl.src = list[list.length -1];
            }else {
                _ctrl.src = _src;
            }

        },me.timer);
        if(_config.clip)
        {
            _ctrl.style.clip = _config.clip;
        }
        _ctrl.width =_w;
        _ctrl.height = _h;

        return _ctrl;
    }

});

